<template>
	<view class="content">
		<view class="top">
			<view class="img">
				<image src="@/static/mine/other-bg.png" mode="widthFix"></image>
			</view>
			<CustomNav :topBgColor="topBgColor" :color="titleColor" :backColor="'#999'" :isBack="false" :custom="custom"
				:title="'我的'"></CustomNav>
			<view class="info">
				<view class="head">
					<image :src="user.faceUrl" mode=""></image>
				</view>
				<view class="name">
					<view class="sex-name">
						{{user.userName}}
					</view>
					<view class="phone">
						{{user.mobile}}
					</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="person" @click="navigate('/pages/mine/info/index')">
				<view class="left">
					<view class="icon">
						<image src="@/static/mine/personal.png" mode=""></image>
					</view>
					<view class="title">
						个人资料
					</view>
				</view>
				<view class="more">
					<image src="@/static/mine/more.png" mode=""></image>
				</view>
			</view>
			<view class="complaina1" @click="navigate('/pages/mine/my-complaint/index')">
				<view class="left">
					<view class="icon">
						<image src="@/static/mine/my-complaint.png" mode=""></image>
					</view>
					<view class="title">
						我的投诉
					</view>
				</view>
				<view class="more">
					<image src="@/static/mine/more.png" mode=""></image>
				</view>
			</view>
			<!-- <view class="complaina" @click="navigate('/pages/lighthouse/index')">
				<view class="left">
					<view class="icon">
						<image src="@/static/mine/lighthouse.png" mode=""></image>
					</view>
					<view class="title">
						曝光台
					</view>
				</view>
				<view class="more">
					<image src="@/static/mine/more.png" mode=""></image>
				</view>
			</view> -->
			<view class="complaina1" @click="navigate('/pages/mine/transaction/index')" v-if="state==1">
				<view class="left">
					<view class="icon">
						<image src="@/static/mine/transaction.png" mode=""></image>
					</view>
					<view class="title">
						投诉处理
					</view>
				</view>
				<view class="more">
					<image src="@/static/mine/more.png" mode=""></image>
				</view>
			</view>
			<view class="complaina" @click="logout" v-if="login==1">
				<view class="left">
					<view class="icon" style="width: 50rpx;
						height: 50rpx;margin-right: 26rpx;">
						<image src="@/static/mine/exit.png"></image>
					</view>
					<view class="title">
						退出登录
					</view>
				</view>
				<view class="more">
					<image src="@/static/mine/more.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		selectUserByIdApi,
		getWhiteList
	} from '@/api/mine.js'
	import {
		getStorage,
		setStorage,
		removeStorage
	} from '@/util/auth.js';
	import {
		getCustomNavData
	} from '@/util/util.js'
	export default {
		data() {
			return {
				custom: null,
				topBgColor: 'rgba(0,0,0,0)',
				titleColor: '#fff',
				user: {
					userName: '微信用户',
					mobile: '',
					faceUrl: '',
					openid: ''
				},
				openIdList: [],
				state: 0,
				login: 0
			}
		},
		methods: {
			navigate(url) {
				uni.navigateTo({
					url
				})
			},
			logout() {
				uni.showModal({
					title: '提示',
					content: `确定要退出重新登录吗？`,
					confirmColor: '#027BFD',
					success: (res) => {
						if (res.confirm) {
							removeStorage('login');
							uni.reLaunch({
								url: '/pages/index/index'
							})
						}
					}
				})
			},
			getSelectUserById() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				selectUserByIdApi({}).then((res) => {
					uni.hideLoading()
					this.user = res
				})
			},
			getWhiteList() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getWhiteList({}).then((res) => {
					uni.hideLoading()
					const list = res
					list.forEach((item, index) => {
						//console.log(item)
						if (item.openid == this.user.openid) {
							// console.log(item.openid)
							// console.log(this.user.openid)
							this.state = 1
						}
					})
				})
			},
		},
		onPageScroll(e) {
			if (e.scrollTop >= 50) {
				this.topBgColor = '#117DFF';
			} else {
				this.topBgColor = 'rgba(0,0,0,0)';
			}
		},
		onShow() {
			const loginInfo = getStorage('login');
			if (loginInfo) {
				this.user = loginInfo
				this.getSelectUserById()
				this.getWhiteList()
				this.login = 1
			}
		},
		onLoad() {
			this.custom = getCustomNavData();
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		background-color: #F6F6F6;

		.top {
			position: relative;
			width: 100%;
			height: 500rpx;

			.img {
				width: 100%;
				height: 100%;

				image {
					width: 100%;
					height: 120%;
					z-index: -1;
				}
			}

			.info {
				position: absolute;
				bottom: 40rpx;
				left: 30rpx;
				display: flex;
				align-items: center;
				width: 100%;
				height: 155rpx;
				padding: 30rpx;

				.head {
					width: 130rpx;
					height: 130rpx;
					border-radius: 150rpx;
					margin-right: 20rpx;
					background: #fff;

					image {
						width: 100%;
						height: 100%;
						border-radius: 150rpx;
					}
				}

				.name {

					.sex-name {
						margin-bottom: 20rpx;
						color: #FFFFFF;
					}

					.phone {
						margin-top: 20rpx;
						color: #FFFFFF;
					}

				}
			}
		}

		.bottom {
			position: relative;
			width: 100%;
			border-radius: 40rpx;
			padding: 30rpx;
			box-sizing: border-box;
			background-color: #F6F6F6;
			border-radius: 45rpx 45rpx 0 0;
			z-index: 99;
			margin-top: -35rpx;

			.person {
				width: 100%;
				height: 150rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx;
				box-sizing: border-box;
				background-color: #FFFFFF;
				border-radius: 30rpx 30rpx 0 0;

				.left {
					display: flex;


					.icon {
						width: 60rpx;
						height: 60rpx;
						margin-right: 20rpx;
						// background-color: red;

						image {
							width: 100%;
							height: 100%;
							margin-right: 20rpx;
						}
					}

					.title {
						margin-top: 5rpx;
					}
				}

				.more {
					width: 40rpx;
					height: 40rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.complaina {
				width: 100%;
				height: 150rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx;
				box-sizing: border-box;
				background-color: #FFFFFF;
				border-radius: 0 0 30rpx 30rpx;

				.left {
					display: flex;


					.icon {
						width: 60rpx;
						height: 60rpx;
						margin-right: 20rpx;
						// background-color: red;

						image {
							width: 100%;
							height: 100%;
							margin-right: 20rpx;
						}
					}

					.title {
						margin-top: 5rpx;
					}
				}

				.more {
					width: 40rpx;
					height: 40rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.complaina1 {
				width: 100%;
				height: 150rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx;
				box-sizing: border-box;
				background-color: #FFFFFF;
				//border-radius: 0 0 30rpx 30rpx;

				.left {
					display: flex;


					.icon {
						width: 60rpx;
						height: 60rpx;
						margin-right: 20rpx;
						// background-color: red;

						image {
							width: 100%;
							height: 100%;
							margin-right: 20rpx;
						}
					}

					.title {
						margin-top: 5rpx;
					}
				}

				.more {
					width: 40rpx;
					height: 40rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

	}
</style>